<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script src="../js/common/angular-route.js"></script>
<script type="text/javascript" src="../js/routing.js"></script>
</head>
<body ng-app="myRoute">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 路由</span>
</div>

<section>
    <div ng-hide="true">
        <h3>【插入简单的 HTML 内容】</h3>
        <ul>
            <li><a href="#/">百度一下</a></li>
            <li><a href="#/youku">优酷视频</a></li>
            <li><a href="#/tudou">土豆视频</a></li>
            <li><a href="#/other">其他的</a></li>
        </ul>
        <div>
            <p ng-view>
            </p>
        </div>
    </div>
    <div>
        <h3>【插入 HTML 模板文件】</h3>
        <ul>
            <a href="#/home">首页</a>
            <a href="#/about">关于</a>
        </ul>
        <div>
            <p ng-view>
            </p>
        </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<ul>
    <a href="#/home">首页</a>
    <a href="#/about">关于</a>
</ul>
<div>
    <p ng-view>
    </p>
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
//插入 HTML 模板文件
app_rout.config(function($routeProvider){
    $routeProvider
    .when('/home',{templateUrl:'../include/wel.html',controller:'htmlCtrl'})
    .when('/about',{templateUrl:'../include/sites.html',controller:'jsCtrl'})
    .otherwise({redirectTo:'/home'});//设置默认路由选项
})
app_rout.controller('htmlCtrl',function($scope){
    //代码块
})
app_rout.controller('jsCtrl',function($scope,$http){
    $http.get('../php/tableData.php').then(function successCallback(reponse){
        $scope.students = reponse.data.studentObj;
    },function errorCallback(reponse){
        $scope.errorInfo = '请求失败';
    })
})
            </xmp>
            <span>【模板源码】</span>
            <xmp ng-non-bindable>
wel:
<div ng-controller="htmlCtrl">
    <h1>angularJs教程</h1>
    <p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>
</div>
sites:
<table style="width: 100%;" border="1px" ng-controller="jsCtrl">
    <div>
        <tbody>
            <tr ng-repeat="x in students">
                <td>{{x.name}}</td>
                <td>{{x.age}}岁</td>
                <td>{{x.height}}cm</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="red">{{errorInfo}}</td>
            </tr>
        </tfoot>
    </div>
</table>
            </xmp>
            <span>【php源码】</span>
            <xmp>
<?php
echo <<<EOT
{
"studentObj":[
{"name":"小李","age":"25","height":"175"},
{"name":"小华","age":"26","height":"177"},
{"name":"小明","age":"23","height":"172"},
{"name":"小红","age":"24","height":"165"},
{"name":"小张","age":"25","height":"173"}
]
}
EOT;
?>
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>